<template>
  <h3>发表评论</h3>
  <div>
    <label for="author">评论人：</label>
    <input
      type="text"
      id="author"
      v-model="author"
      placeholder="请输入您的名字"
    />
  </div>
  <div>
    <label for="content">评论内容：</label>
    <input id="content" v-model="content" placeholder="请输入评论内容" />
  </div>
  <button @click="comment">发布评论</button>
</template>

<script>
export default {
  emits: ["add"],
  data() {
    return {
      author: "",
      content: "",
    };
  },
  methods: {
    comment() {
      if (!this.author.trim() || !this.content.trim()) {
        alert("评论人和评论内容不能为空！");
        return;
      }

      this.$emit("add", {
        author: this.author,
        content: this.content,
        date: new Date().toLocaleString(),
      });

      this.author = "";
      this.content = "";
    },
  },
};
</script>

<style>
</style>